<template>
  <div class="father">
    <pre>pinia是Vue.js生态系统的官方推荐状态管理库,它允许开发者跨组件或页面共享状态
用它可以实现全局的状态共享,从而实现跨组件通信</pre>
    <h3>父组件</h3>
    <h4>A + B：{{ addAB }}</h4>
    <button @click="incrementA">A增加</button>  &nbsp;
    <button @click="incrementB">B增加</button>
    <Child />
  </div>
</template>

<script setup lang="ts" name="Father">
import { useCounterStore } from '@/stores/counterStore';
import {storeToRefs} from 'pinia';
import Child from './Child.vue';

const counterStore = useCounterStore();
const { incrementA, incrementB } = counterStore;
const {addAB} = storeToRefs(counterStore);
</script>

<style scoped>
.father {
  background-color: rgb(165, 165, 165);
  padding: 20px;
  border-radius: 10px;
}
</style>